<template>
    <div>
        <h3>技术管理数据中心</h3>
        <el-date-picker class="choice-date" v-model="choice_date" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        <div class="content">
            <div class="table-block">
                <h5>施工方案统计表</h5>
                <div class="table">
                    <el-table :cell-style="getCellStyle" :header-cell-style="getRowClass" stripe :data="table_1" style="width: 100%">
                        <el-table-column label="序号" type="index" width="50">
                        </el-table-column>
                        <el-table-column label="方案名称" property="name"></el-table-column>
                        <el-table-column label="计划编制开始时间" property="start"></el-table-column>
                        <el-table-column label="计划编制完成时间" property="end"></el-table-column>
                        <el-table-column label="编制人" property="manager"></el-table-column>
                        <el-table-column label="是否完成编制" property="status"></el-table-column>
                        <el-table-column label="方案类型" property="type"></el-table-column>
                        <el-table-column label="重要程度" width="200">
                            <template slot-scope="scope">
                                <el-rate v-model="scope.row.star" disabled></el-rate>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="table-block">
                <h5>技术交底技术表</h5>
                <div class="table">
                    <el-table :cell-style="getCellStyle" :header-cell-style="getRowClass" stripe :data="table_2" style="width: 100%">
                        <el-table-column label="序号" type="index" width="50">
                        </el-table-column>
                        <el-table-column label="技术交底名称" property="name"></el-table-column>
                        <el-table-column label="计划交底时间" property="deadline"></el-table-column>
                        <el-table-column label="交底人" property="manager"></el-table-column>
                        <el-table-column label="是否完成" property="status"></el-table-column>
                        <el-table-column label="重要程度" width="200">
                            <template slot-scope="scope">
                                <el-rate v-model="scope.row.star" disabled></el-rate>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="table-block">
                <h5>设计变更统计表</h5>
                <div class="table">
                    <el-table :cell-style="getCellStyle" :header-cell-style="getRowClass" stripe :data="table_2" style="width: 100%">
                        <el-table-column label="序号" type="index" width="50">
                        </el-table-column>
                        <el-table-column label="技术交底名称" property="name"></el-table-column>
                        <el-table-column label="计划交底时间" property="deadline"></el-table-column>
                        <el-table-column label="交底人" property="manager"></el-table-column>
                        <el-table-column label="是否完成" property="status" width="240"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "technology-table",
    data() {
        return {
            choice_date: ["2018-10-01", "2018-10-12"],
            table_1: [
                {
                    name: "项目1部",
                    start: "2018年11月10日",
                    end: "201811月10日",
                    manager: "张三",
                    status: "是",
                    type: "A类",
                    star: 2
                },
                {
                    name: "项目1部",
                    start: "2018年11月10日",
                    end: "201811月10日",
                    manager: "张三",
                    status: "是",
                    type: "A类",
                    star: 2
                },
                {
                    name: "项目1部",
                    start: "2018年11月10日",
                    end: "201811月10日",
                    manager: "张三",
                    status: "是",
                    type: "A类",
                    star: 2
                },
                {
                    name: "项目1部",
                    start: "2018年11月10日",
                    end: "201811月10日",
                    manager: "张三",
                    status: "否",
                    type: "A类",
                    star: 2
                },
                {
                    name: "项目1部",
                    start: "2018年11月10日",
                    end: "201811月10日",
                    manager: "张三",
                    status: "否",
                    type: "A类",
                    star: 2
                }
            ],
            table_2: [
                {
                    name: "模板1部",
                    deadline: "2018年11月10日",
                    manager: "张三",
                    status: "是",
                    star: 2
                },
                {
                    name: "项目1部",
                    deadline: "2018年11月10日",
                    manager: "张三",
                    status: "是",
                    star: 2
                },
                {
                    name: "项目1部",
                    deadline: "2018年11月10日",
                    manager: "张三",
                    status: "是",
                    star: 2
                },
                {
                    name: "项目1部",
                    deadline: "2018年11月10日",
                    manager: "张三",
                    status: "否",
                    star: 2
                },
                {
                    name: "项目1部",
                    deadline: "2018年11月10日",
                    manager: "张三",
                    status: "否",
                    star: 2
                }
            ],
            table_3: [
                {
                    name: '高大模板支模',
                    content: '高大模板支模',
                    building: 'A栋12层',
                    manager: '张三',
                    status: '未复核',
                    logline: '2018年11月10日'
                },
                {
                    name: '超高模板支模',
                    content: '超高模板支模',
                    building: 'A栋12层',
                    manager: '张三',
                    status: '复核不通过',
                    logline: '2018年11月10日'
                },
                {
                    name: '超高模板支模',
                    content: '超高模板支模',
                    building: 'A栋12层',
                    manager: '张三',
                    status: '复核通过',
                    logline: '2018年11月10日'
                },
                {
                    name: '悬挑架工字钢安装',
                    content: '悬挑架工字钢安装',
                    building: 'A栋12层',
                    manager: '张三',
                    status: '未复核',
                    logline: '2018年11月10日'
                },
                {
                    name: '悬挑架工字钢安装',
                    content: '悬挑架工字钢安装',
                    building: 'A栋12层',
                    manager: '张三',
                    status: '未复核',
                    logline: '2018年11月10日'
                }
            ]
        };
    },
    methods: {
        getRowClass({ row, column, rowIndex, colIndex }) {
            if (rowIndex === 0) {
                return "background:#f5f7f9;text-align: center;";
            }
        },
        getCellStyle({row, rowIndex}) {
            return "text-align: center"
        }
    }
};
</script>

<style scoped>
@import "../../assets/css/data.css";
</style>
